<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
</head>
<body>

        <style>
            .fl-table {
                margin: 20px;
                border-radius: 5px;
                font-size: 12px;
                border: none;
                border-collapse: collapse;
                max-width: 100%;
                white-space: nowrap;
                word-break: keep-all;
            }

            .fl-table th {
                text-align: left;
                font-size: 20px;
            }

            .fl-table tr {
                display: table-row;
                vertical-align: inherit;
                border-color: inherit;
            }

            .fl-table tr:hover td {
                background: #00d1b2;
                color: #F8F8F8;
            }

            .fl-table td, .fl-table th {
                border-style: none;
                border-top: 1px solid #dbdbdb;
                border-left: 1px solid #dbdbdb;
                border-bottom: 3px solid #dbdbdb;
                border-right: 1px solid #dbdbdb;
                padding: .5em .55em;
                font-size: 15px;
            }

            .fl-table td {
                border-style: none;
                font-size: 15px;
                vertical-align: center;
                border-bottom: 1px solid #dbdbdb;
                border-left: 1px solid #dbdbdb;
                border-right: 1px solid #dbdbdb;
                height: 30px;
            }

            .fl-table tr:nth-child(even) {
                background: #F8F8F8;
            }
        </style>
        <div id="10e1939f5b714c9e8c5889f5a87c125b" class="chart-container" style="">
            <p class="title" style="font-size: 18px; font-weight:bold;" > Table-基本示例</p>
            <p class="subtitle" style="font-size: 12px;" > 我是副标题支持换行哦</p>
            <table class="fl-table">
    <thead>
        <tr>
            <th>City name</th>
            <th>Area</th>
            <th>Population</th>
            <th>Annual Rainfall</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Brisbane</td>
            <td>5905</td>
            <td>1857594</td>
            <td>1146.4</td>
        </tr>
        <tr>
            <td>Adelaide</td>
            <td>1295</td>
            <td>1158259</td>
            <td>600.5</td>
        </tr>
        <tr>
            <td>Darwin</td>
            <td>112</td>
            <td>120900</td>
            <td>1714.7</td>
        </tr>
        <tr>
            <td>Hobart</td>
            <td>1357</td>
            <td>205556</td>
            <td>619.5</td>
        </tr>
        <tr>
            <td>Sydney</td>
            <td>2058</td>
            <td>4336374</td>
            <td>1214.8</td>
        </tr>
        <tr>
            <td>Melbourne</td>
            <td>1566</td>
            <td>3806092</td>
            <td>646.9</td>
        </tr>
        <tr>
            <td>Perth</td>
            <td>5386</td>
            <td>1554769</td>
            <td>869.4</td>
        </tr>
    </tbody>
</table>
        </div>


</body>
</html>
